<template>
	<view class="index-banners">
		<!-- 定位信息视图 -->
		<!-- <view class="shang" style="justify-content: center;">
			<image class="dingwei" src="/static/dingwei.png"></image>
			<text class="cityname">重庆市</text>
		</view> -->

		<!-- 轮播图-->
		<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"
			style="height: 300rpx; margin-bottom: 0">
			<swiper-item v-for="pic in banners" :key="pic.id">
				<view class="swiper-item">
					<image class="lunbotu" :src="pic.src" mode="widthFix" style="object-fit: contain; margin-bottom: 0">
					</image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 导航区域（订单发布和发单记录）-->
		<view class="navs">
			<view class="navs-top">
				<view class="navs-header">
					<uni-row>
						<!-- 左侧：订单发布区-->
						<uni-col :span="12">
							<view class="navs-left">
								<image src="/static/daohangqu1/arrowhead.png" class="arrowhead"></image>
								<text class="navs-title1">订单发布</text>
							</view>
						</uni-col>

						<!-- 右侧：发单记录-->
						<uni-col :span="12" style="display: flex; justify-content: flex-end">
							<text class="navs-title2" @click="navigateToRecord">历史记录 ></text>
						</uni-col>
					</uni-row>
				</view>
			</view>

			<!-- 放置图标的uni-row，使图标在同一排 -->
			<view>
				<uni-row class="icon-row1" :gutter="20">
					<uni-col v-for="item in navItems" @tap="navigateTo(item.path)" :key="item.id" :span="8">
						<view class="navs-item">
							<image class="navs-icon" :src="item.icon"></image>
							<text class="navs-text">{{ item.text }}</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>

		<!-- 两个标签页容器 -->
		<view class="two-tabs-container">
			<view class="two-tabs-bar">
				<view class="two-tab-item" :class="{ active: activeTab === 'local' }" @click="changeTab('local')">
					<!-- 本地师傅图标（默认显示） -->
					<image v-if="activeTab === 'local'" class="tab-icon" src="/static/renwu/taiqiu.png"></image>
					<text class="two-tab-text">本地师傅</text>
					<view v-if="activeTab === 'local'" class="two-active-line"></view>
				</view>

				<!-- 市内交易标签 -->
				<view class="two-tab-item" :class="{ active: activeTab === 'city' }" @click="changeTab('city')">
					<image v-if="activeTab === 'city'" class="tab-icon" src="/static/renwu/taiqiu.png"></image>
					<text class="two-tab-text">市内交易</text>
					<view v-if="activeTab === 'city'" class="two-active-line"></view>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="two-tabs-content">
				<!-- 本地师傅内容 -->
				<view v-if="activeTab === 'local' && localMasters.length > 0" class="tab-panel">
					<view v-for="(master, index) in localMasters" :key="index" class="master-card">
						<view class="master-header">
							<text class="master-title">{{ master.name }}</text>
							<text v-if="master.status === 'approved'" class="master-verified">实名</text>
						</view>
						<text class="master-phone">电话：{{ master.phone }}</text>
						<text class="master-services">技能：{{ master.skills.join(" / ") }}</text>
						<text class="master-location">服务城市：{{ master.work_city.join(" / ") }}</text>
						<text class="master-date">注册时间：{{ formatDate(master.created_at) }}</text>
						<view class="master-footer">
							<text class="master-stats">累计服务{{ master.service_count }}次 | 好评率{{
                  master.rating || "暂无"
                }}%</text>
						</view>
					</view>
				</view>

				<!-- 市内交易内容 -->

				<view v-if="activeTab === 'city' && cityTrades.length > 0" class="tab-panel">
					<view class="address-container" style="display: flex; align-items: center; margin-bottom: 20rpx">
						<image class="dingwei" src="/static/dingwei.png"style="width: 40rpx; height: 40rpx; margin-left: 10rpx"></image>

						<uni-data-picker :localdata="region" popup-title="请选择地址" v-model="selectedRegion"
							@change="onchange" @nodeclick="onnodeclick" style="
                width: 280rpx;
                height: 90rpx;
                flex: 1;
                margin-left: 30rpx;
                border: none;
                outline: none;
              ">
						</uni-data-picker>
					</view>

					<view v-for="trade in cityTrades" :key="trade.id" class="trade-card">
						<view class="trade-header">
							<text class="trade-title">交易ID: {{ trade.trade_id }}</text>
							<text class="trade-status">{{ trade.status }}</text>
						</view>
						<text class="trade-info">买家ID: {{ trade.buyer_id }}</text>
						<text class="trade-info">数量: {{ trade.quantity }}</text>
						<text class="trade-info">总价: ¥{{ trade.total_price }}</text>
						<text class="trade-date">创建时间: {{ formatDate(trade.created_at) }}</text>
						<text class="trade-date">更新时间: {{ formatDate(trade.updated_at) }}</text>
					</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="
            (activeTab === 'local' && localMasters.length === 0 && !loading) ||
            (activeTab === 'city' && cityTrades.length === 0 && !loading)
          " class="empty-tip">
					<image class="empty-icon"></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import region from "@/components/region_data.json";
	export default {
		data() {
			return {
				banners: [{
						src: "/static/lunbotu1/taiqiu1(1).png",
						id: 1,
					},
					{
						src: "/static/lunbotu1/taiqiu2(1).jpg",
						id: 2,
					},
					{
						src: "/static/lunbotu1/taiqiu3.jpg",
						id: 3,
					},
				],
				navItems: [{
						id: 1,
						text: "更换台尼",
						icon: "/static/daohangqu1/change.png",
						path: "/pages/category/taini/index",
					},
					{
						id: 2,
						text: "拆装球桌",
						icon: "/static/daohangqu1/table.png",
						path: "/pages/category/taini/index",
					},
					{
						id: 3,
						text: "更换配件",
						icon: "/static/daohangqu1/part.png",
						path: "/pages/category/taini/index",
					},
					{
						id: 4,
						text: "维修球杆",
						icon: "/static/daohangqu1/repair.png",
						path: "/pages/category/taini/index",
					},
					{
						id: 5,
						text: "搬修服务",
						icon: "/static/daohangqu1/transport.png",
						path: "/pages/category/taini/index",
					},
				],
				localMasters: [],
				cityTrades: [],
				loading: false,
				isLoading: false,
				requestFailed: false,

				activeTab: "local",
				token: "",
				selectedRegion: [],
				region: [],
				queryParams: {
					name: "刘俊杰",
					id: "1",
					skills: "水电维修",
					work_city: "眉山",
					city: "北京",
					type: "闲置台球台",
				},
				id: '',
				trade_id: '',
				buyer_id: '',
				quantity: '',
				total_price:'',
				status: '',
				created_at: '',
				updated_at: '',
				selectedCity: "",
				selectedAddress: {
					fullAddress: "",
					province: "",
					city: "",
					// district: ''
				},
			};
		},
		created() {
			this.region = region.map((province) => ({
				text: province.text,
				value: province.value,
				children: province.children || [],
			}));
		},
		methods: {
			getLocalMasters() {
				this.token = uni.getStorageSync("token");

				this.$http
					.get("https://billiards.cqtrust.cn/workers_admin", {
						// params: this.queryParams
						// params: {
						work_city: this.queryParams.work_city,

						//
						//        }
					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: "none",
						});
						if (code == 1 || code == 200) {
							if (data && data.length > 0) {
								this.localMasters = data;
								console.log(data);
							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},

			getCityTrades() {
				this.token = uni.getStorageSync("token");
				this.$http
					.get("https://billiards.cqtrust.cn/local_trades_order", {
						// params:{
						//  city:this.currentCity,
						//  }

						// city: this.queryParams.city,
						// type: this.queryParams./city: this.currentCity

						id: this.id,
						trade_id: this.trade_id,
						buyer_id: this.buyer_id,
						quantity: this.quantity,
						total_price: this.total_price,
						status: this.status,
						created_at: this.created_at,
						updated_at: this.updated_at,
					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: "none",
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.cityTrades = data;
								console.log(data);
							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},

			navigateTo(path) {
				uni.navigateTo({
					url: path,
				});
			},

			navigateToRecord() {
				uni.navigateTo({
					url: "/pages/fadanjilu/index",
				});
			},
			formatDate(dateString) {
				if (!dateString) return "未知时间";
				const date = new Date(dateString);
				return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
			},

			changeTab(tab) {
				this.activeTab = tab; //页面不跳转
				if (tab == "city" && this.cityTrades.length === 0) {
					this.getCityTrades();
				}
				if (tab == "local" && this.localMasters.length === 0) {
					this.getLocalMasters();
				}
			},

			previewImage(images, index) {
				uni.previewImage({
					current: index,
					urls: images,
				});
			},

			onchange(e) {
				const selected = e.detail.value.map((item) => item.text);

				this.selectedAddress = {
					fullAddress: selected.join(" "),
					province: selected[0] || "",
					city: selected[1] || "",
					district: selected[2] || "",
				};
				this.selectedCity = selected[1] || selected[0];
				this.getCityTrades();
			},

			onnodeclick() {},
		},
		onLoad() {
			this.$http.get("/users", {}).then((res) => {
				console.log(res);
			});
		},
		onShow() {
			this.getLocalMasters();
			this.getCityTrades();
		},
	};
</script>

<style lang="scss" scoped>
	.index-banners {
		// .shang {
		// 	position: relative;
		// 	z-index: 1;
		// 	padding: 8rpx 20rpx;
		// 	color: #8a8a8a;
		// 	display: flex;
		// 	align-items: center;
		// 	flex-direction: row;
		// 	gap: 8rpx;

		// 	.cityname {
		// 		font-size: 35rpx;
		// 		color: #8a8a8a;
		// 		display: flex;
		// 		text-align: right;
		// 		white-space: nowrap;
		// 		font-family: "SimSun";
		// 		font-weight: 300;
		// 	}

		// 	.dingwei {
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 	}
		// }

		.swiper-item {
			padding: 0rpx 12rpx;
			overflow: hidden;
			min-height: 400rpx;
		}

		.lunbotu {
			width: 100%;
			height: 285rpx !important;
			border-radius: 20rpx;
			display: block;
			margin: 0;
			object-fit: cover;
		}
	}

	.navs {
		background-color: #ffffff;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 15rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden; //防止方框溢出

		.navs-header {
			width: 100%;

			.navs-left {
				display: flex;
				align-items: center;

				.arrowhead {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				.navs-title1 {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin: 0 20rpx 20rpx 0 auto; //(上右下左)
					white-space: nowrap;
					/* 防止文字换行 */
				}
			}

			.navs-title2 {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin: 0 20rpx 20rpx auto; //(上右下左)
				white-space: nowrap;

				/* 防止文字换行 */
				&:active {
					color: #fdad18;
				}
			}
		}

		.navs-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			margin-bottom: 20px;

			.navs-icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}

			.navs-text {
				font-size: 24rpx;
				color: #666;
				text-align: center;
			}
		}
	}

	.two-tabs-container {
		width: 100%;
		margin-top: 30rpx;

		.two-tabs-bar {
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			background-color: #fff;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.two-tab-item {
			flex: 1;
			/* 平均分配宽度 */
			display: flex;
			justify-content: center;
			/* 内容居中 */
			align-items: center;
			padding: 20rpx 0;
			position: relative;

			.tab-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.two-tab-text {
				font-size: 28rpx;
				color: #666;
				transition: color 0.3s;
			}

			&.active .two-tab-text {
				color: #ffaa00;
				font-weight: bold;
			}

			.two-active-line {
				width: 60rpx;
				height: 4rpx;
				background-color: #ffaa00;
				position: absolute;
				bottom: 0;
				border-radius: 2rpx;
			}
		}

		/* 内容区域 */
		.two-tabs-content {
			padding: 30rpx;
			background-color: #fff;
		}

		/* 本地师傅内容 */
		.tab-panel {
			.master-card {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				.master-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;

					.master-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.master-verified {
						font-size: 24rpx;
						color: #ffaa00;
						padding: 4rpx 10rpx;
						border: 1rpx solid #ffaa00;
						border-radius: 6rpx;
					}
				}

				.master-phone {
					display: block;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.master-services {
					display: block;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.master-location {
					display: block;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
				}

				.master-date {
					display: block;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 15rpx;
				}

				.master-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.master-stats {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.trade-card {
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}

		.trade-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15rpx;
		}

		.trade-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.trade-status {
			font-size: 28rpx;
			color: #ffaa00;
		}

		.trade-info {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 10rpx;
		}

		.trade-date {
			display: block;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.loading-tip {
			padding: 40rpx;
			text-align: center;
			color: #999;
			font-size: 28rpx;
		}

		.empty-tip {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;
			text-align: center;

			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
				opacity: 0.6;
			}

			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>